<!DOCTYPE html>
<html lang="zh-CN" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能表格管理系统 - 浙江传媒学院实验七</title>
    <link rel="stylesheet" href="css/style.css?v=1.3">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
</head>
<body class="min-h-screen bg-background">
    <div class="container mx-auto p-6 h-screen flex flex-col max-w-7xl">
        <!-- 标题栏 -->
        <header class="relative bg-card border border-border rounded-2xl p-6 mb-6 shadow-lg backdrop-blur-sm animate-slide-in">
            <div class="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-accent/5 rounded-2xl"></div>
            <div class="relative flex items-center justify-between">
                <div class="flex items-center gap-6">
                    <div class="flex items-center gap-4">
                        <div class="relative w-12 h-12 bg-gradient-to-br from-primary to-primary/80 rounded-xl flex items-center justify-center shadow-lg animate-pulse-glow">
                            <div class="text-primary-foreground text-2xl">🤖</div>
                            <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white dark:border-card flex items-center justify-center">
                                <div class="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                            </div>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-foreground bg-gradient-to-r from-primary via-accent-foreground to-primary bg-clip-text text-transparent">
                                AI智能表格管理系统
                            </h1>
                            <p class="text-sm text-muted-foreground">
                                DeepSeek AI + 数据库 + Web开发综合应用
                            </p>
                        </div>
                    </div>
                    <div class="h-12 w-px bg-gradient-to-b from-transparent via-border to-transparent"></div>
                    <div class="text-sm text-foreground/80">
                        <div class="flex items-center gap-6">
                            <div class="flex items-center gap-2">
                                <div class="p-1.5 bg-primary/10 rounded-lg">
                                    <div class="h-4 w-4 text-primary">🎓</div>
                                </div>
                                <span>浙江传媒学院</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <div class="p-1.5 bg-accent/50 rounded-lg">
                                    <div class="h-4 w-4 text-accent-foreground">👥</div>
                                </div>
                                <span>作者：俞哲</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <div class="p-1.5 bg-secondary rounded-lg">
                                    <div class="h-4 w-4 text-secondary-foreground">⚡</div>
                                </div>
                                <span>指导：栗青生老师</span>
                            </div>
                        </div>
                        <div class="text-xs text-muted-foreground mt-2 flex items-center gap-2">
                            <div class="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
                            实验七 - AI + 数据库 + Web开发综合应用
                        </div>
                    </div>
                </div>

                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-3 px-3 py-2 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-lg border border-green-200 dark:border-green-800">
                        <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse" id="connectionDot"></div>
                        <span class="text-sm font-medium text-green-700 dark:text-green-300" id="connectionStatusText">
                            AI已连接
                        </span>
                    </div>
                    <div class="bg-gradient-to-r from-primary/10 to-accent/10 text-primary border border-primary/20 px-3 py-1 rounded-full text-sm font-medium">
                        v1.0.0
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <div class="flex-1 grid grid-cols-1 lg:grid-cols-5 gap-6 min-h-0">
            <!-- AI对话区域 -->
            <div class="lg:col-span-2 flex flex-col animate-slide-in" style="animation-delay: 0.1s;">
                <div class="bg-card rounded-2xl border border-border shadow-lg p-6 flex-1 min-h-0 flex flex-col">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-lg font-semibold flex items-center gap-2">
                            <div class="w-8 h-8 bg-gradient-to-br from-primary to-accent rounded-lg flex items-center justify-center">
                                <span class="text-primary-foreground text-sm">💬</span>
                            </div>
                            与AI助手对话
                        </h2>
                        <div class="flex gap-2">
                            <button id="clearChatBtn" class="btn btn-secondary text-sm">清空对话</button>
                            <button id="showExamplesBtn" class="btn btn-primary text-sm">示例命令</button>
                        </div>
                    </div>

                    <div class="border border-border rounded-xl bg-muted/20 flex-1 min-h-0 flex flex-col">
                        <div class="flex-1 p-4 overflow-y-auto space-y-4" id="chatMessages">
                            <!-- 欢迎消息 -->
                            <div class="flex items-start gap-3 p-4 bg-gradient-to-r from-accent/30 to-primary/20 rounded-xl border border-accent/30">
                                <div class="w-8 h-8 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center flex-shrink-0">
                                    <span class="text-primary-foreground text-sm">🤖</span>
                                </div>
                                <div class="flex-1">
                                    <div class="text-sm text-accent-foreground leading-relaxed">
                                        👋 <strong>欢迎使用AI智能表格管理系统！</strong><br><br>
                                        您可以用自然语言来管理学生信息，例如：<br>
                                        • "添加一个学生，姓名张三，年龄20，专业计算机科学"<br>
                                        • "查询所有计算机专业的学生信息"<br>
                                        • "删除姓名为李四的学生记录"<br>
                                        • "修改张三的年龄为21岁"
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="border-t border-border p-4">
                            <div class="flex gap-3">
                                <input
                                    type="text"
                                    id="chatInput"
                                    placeholder="请输入您的指令，比如：添加学生、查询数据、统计信息..."
                                    class="flex-1 px-4 py-3 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-background text-foreground placeholder-muted-foreground"
                                    autocomplete="off"
                                >
                                <button id="sendBtn" class="btn btn-primary px-6 py-3 rounded-xl">
                                    <span>发送</span>
                                    <span class="ml-2">📤</span>
                                </button>
                            </div>
                            <div class="text-xs text-muted-foreground mt-3 flex items-center gap-2">
                                <div class="w-1 h-1 bg-primary rounded-full"></div>
                                💡 支持自然语言指令：增加、删除、修改、查询学生信息
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据展示区域 -->
            <div class="lg:col-span-3 flex flex-col gap-6 animate-slide-in" style="animation-delay: 0.2s;">
                <!-- 统计面板 -->
                <div class="flex-shrink-0">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="statsPanel">
                        <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 p-6 rounded-xl border border-blue-200 dark:border-blue-800">
                            <div class="flex items-center gap-3 mb-2">
                                <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
                                    <span class="text-white text-sm">👥</span>
                                </div>
                                <div class="text-sm text-blue-600 dark:text-blue-400 font-medium">总学生数</div>
                            </div>
                            <div class="text-2xl font-bold text-blue-700 dark:text-blue-300" id="totalStudents">-</div>
                        </div>
                        <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 p-6 rounded-xl border border-green-200 dark:border-green-800">
                            <div class="flex items-center gap-3 mb-2">
                                <div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
                                    <span class="text-white text-sm">📚</span>
                                </div>
                                <div class="text-sm text-green-600 dark:text-green-400 font-medium">专业数量</div>
                            </div>
                            <div class="text-2xl font-bold text-green-700 dark:text-green-300" id="totalMajors">-</div>
                        </div>
                        <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 p-6 rounded-xl border border-purple-200 dark:border-purple-800">
                            <div class="flex items-center gap-3 mb-2">
                                <div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center">
                                    <span class="text-white text-sm">📊</span>
                                </div>
                                <div class="text-sm text-purple-600 dark:text-purple-400 font-medium">平均年龄</div>
                            </div>
                            <div class="text-2xl font-bold text-purple-700 dark:text-purple-300" id="averageAge">-</div>
                        </div>
                    </div>
                </div>

                <!-- 学生数据表格 -->
                <div class="flex-1 min-h-0">
                    <div class="bg-card rounded-2xl border border-border shadow-lg flex-1 min-h-0 flex flex-col">
                        <div class="p-6 border-b border-border">
                            <div class="flex items-center justify-between">
                                <h2 class="text-lg font-semibold flex items-center gap-2">
                                    <div class="w-8 h-8 bg-gradient-to-br from-primary to-accent rounded-lg flex items-center justify-center">
                                        <span class="text-primary-foreground text-sm">📊</span>
                                    </div>
                                    学生数据管理
                                </h2>
                                <div class="flex gap-2 flex-wrap">
                                    <button id="addStudentBtn" class="btn btn-success text-sm">➕ 添加学生</button>
                                    <button id="sortByIdBtn" class="btn btn-info text-sm">🔢 按学号排序</button>
                                    <button id="refreshDataBtn" class="btn btn-primary text-sm">🔄 刷新数据</button>
                                    <button id="showStatsBtn" class="btn btn-secondary text-sm">📈 统计信息</button>
                                </div>
                            </div>
                        </div>

                        <div class="flex-1 min-h-0 overflow-auto">
                            <table class="w-full" id="studentsTable">
                                <thead class="bg-muted/50 sticky top-0">
                                    <tr>
                                        <th class="text-left p-4 font-medium text-muted-foreground sortable cursor-pointer hover:bg-muted/80 transition-colors" data-sort="id">
                                            学号 <span class="sort-icon ml-1 text-xs">⇅</span>
                                        </th>
                                        <th class="text-left p-4 font-medium text-muted-foreground sortable cursor-pointer hover:bg-muted/80 transition-colors" data-sort="name">
                                            姓名 <span class="sort-icon ml-1 text-xs">⇅</span>
                                        </th>
                                        <th class="text-left p-4 font-medium text-muted-foreground sortable cursor-pointer hover:bg-muted/80 transition-colors" data-sort="age">
                                            年龄 <span class="sort-icon ml-1 text-xs">⇅</span>
                                        </th>
                                        <th class="text-left p-4 font-medium text-muted-foreground sortable cursor-pointer hover:bg-muted/80 transition-colors" data-sort="major">
                                            专业 <span class="sort-icon ml-1 text-xs">⇅</span>
                                        </th>
                                        <th class="text-left p-4 font-medium text-muted-foreground">创建时间</th>
                                        <th class="text-left p-4 font-medium text-muted-foreground">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="studentsTableBody" class="divide-y divide-border">
                                    <!-- 动态生成的表格数据 -->
                                </tbody>
                            </table>

                            <div class="flex items-center justify-center py-16" id="tableLoading">
                                <div class="flex items-center gap-3 text-muted-foreground">
                                    <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
                                    <span>正在加载数据...</span>
                                </div>
                            </div>
                            <div class="flex flex-col items-center justify-center py-16 text-center" id="tableEmpty" style="display: none;">
                                <div class="text-6xl mb-4 opacity-50">📝</div>
                                <div class="text-lg font-medium mb-2 text-muted-foreground">暂无学生数据</div>
                                <div class="text-sm text-muted-foreground mb-4">开始添加一些学生信息吧！</div>
                                <button class="btn btn-primary" onclick="document.getElementById('addStudentBtn').click()">
                                    ➕ 添加第一个学生
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="mt-6 pt-6 border-t border-gradient-to-r from-transparent via-border to-transparent">
            <div class="flex items-center justify-center gap-6 text-xs text-muted-foreground">
                <span class="flex items-center gap-2">
                    <div class="w-1 h-1 bg-primary rounded-full"></div>
                    © 2024 浙江传媒学院 - AI智能表格管理系统
                </span>
                <div class="flex items-center gap-2 hover:text-primary transition-colors cursor-pointer">
                    <span class="text-xs">💻</span>
                    <span>项目展示</span>
                </div>
                <div class="flex items-center gap-2 hover:text-primary transition-colors cursor-pointer">
                    <span class="text-xs">✉️</span>
                    <span>技术支持</span>
                </div>
            </div>
        </footer>
    </div>

    <!-- 模态框保持原有结构但样式更新 -->
    <!-- 示例命令模态框 -->
    <div class="modal fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50 hidden" id="examplesModal">
        <div class="bg-card rounded-2xl shadow-2xl max-w-4xl w-full max-h-[80vh] overflow-auto border border-border">
            <div class="flex items-center justify-between p-6 border-b border-border">
                <h3 class="text-xl font-semibold flex items-center gap-2">
                    <span class="text-2xl">💡</span>
                    示例命令
                </h3>
                <button class="text-muted-foreground hover:text-foreground transition-colors p-1" id="closeExamplesModal">
                    <span class="text-xl">&times;</span>
                </button>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <h4 class="font-medium text-primary flex items-center gap-2">
                            <span>📝</span> 添加学生
                        </h4>
                        <div class="space-y-2">
                            <div class="p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted transition-colors example-item" data-command="添加一个学生，姓名张三，年龄20，专业计算机科学与技术">
                                添加一个学生，姓名张三，年龄20，专业计算机科学与技术
                            </div>
                            <div class="p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted transition-colors example-item" data-command="新增学生李四，年龄21，专业软件工程">
                                新增学生李四，年龄21，专业软件工程
                            </div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <h4 class="font-medium text-green-600 flex items-center gap-2">
                            <span>🔍</span> 查询学生
                        </h4>
                        <div class="space-y-2">
                            <div class="p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted transition-colors example-item" data-command="查询所有学生">
                                查询所有学生
                            </div>
                            <div class="p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted transition-colors example-item" data-command="查询计算机专业的学生">
                                查询计算机专业的学生
                            </div>
                            <div class="p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted transition-colors example-item" data-command="查找年龄为20的学生">
                                查找年龄为20的学生
                            </div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <h4 class="font-medium text-orange-600 flex items-center gap-2">
                            <span>✏️</span> 修改学生
                        </h4>
                        <div class="space-y-2">
                            <div class="p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted transition-colors example-item" data-command="修改张三的年龄为22">
                                修改张三的年龄为22
                            </div>
                            <div class="p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted transition-colors example-item" data-command="更新李四的专业为人工智能">
                                更新李四的专业为人工智能
                            </div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <h4 class="font-medium text-red-600 flex items-center gap-2">
                            <span>🗑️</span> 删除学生
                        </h4>
                        <div class="space-y-2">
                            <div class="p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted transition-colors example-item" data-command="删除姓名为王五的学生">
                                删除姓名为王五的学生
                            </div>
                            <div class="p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted transition-colors example-item" data-command="移除学号为3的学生记录">
                                移除学号为3的学生记录
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑学生模态框 -->
    <div class="modal fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50 hidden" id="studentModal">
        <div class="bg-card rounded-2xl shadow-2xl max-w-md w-full border border-border">
            <div class="flex items-center justify-between p-6 border-b border-border">
                <h3 id="studentModalTitle" class="text-lg font-semibold">➕ 添加学生</h3>
                <button class="text-muted-foreground hover:text-foreground transition-colors p-1" id="closeStudentModal">
                    <span class="text-xl">&times;</span>
                </button>
            </div>
            <div class="p-6">
                <form id="studentForm" class="space-y-4">
                    <input type="hidden" id="editStudentId" value="">
                    <div>
                        <label for="studentName" class="block text-sm font-medium mb-2 text-foreground">姓名 *</label>
                        <input type="text" id="studentName" name="name" required placeholder="请输入学生姓名" class="w-full px-4 py-3 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-background text-foreground">
                    </div>
                    <div>
                        <label for="studentAge" class="block text-sm font-medium mb-2 text-foreground">年龄 *</label>
                        <input type="number" id="studentAge" name="age" required min="16" max="100" placeholder="请输入年龄" class="w-full px-4 py-3 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-background text-foreground">
                    </div>
                    <div>
                        <label for="studentMajor" class="block text-sm font-medium mb-2 text-foreground">专业 *</label>
                        <input type="text" id="studentMajor" name="major" required placeholder="请输入专业名称" class="w-full px-4 py-3 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-background text-foreground">
                    </div>
                    <div class="flex gap-3 pt-4">
                        <button type="button" id="cancelStudentBtn" class="btn btn-secondary flex-1 py-3 rounded-xl">取消</button>
                        <button type="submit" id="saveStudentBtn" class="btn btn-primary flex-1 py-3 rounded-xl">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div class="modal fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50 hidden" id="confirmModal">
        <div class="bg-card rounded-2xl shadow-2xl max-w-md w-full border border-border">
            <div class="flex items-center justify-between p-6 border-b border-border">
                <h3 class="text-lg font-semibold text-destructive">⚠️ 确认删除</h3>
                <button class="text-muted-foreground hover:text-foreground transition-colors p-1" id="closeConfirmModal">
                    <span class="text-xl">&times;</span>
                </button>
            </div>
            <div class="p-6">
                <p id="confirmMessage" class="mb-6 text-foreground">确定要删除这条学生记录吗？此操作不可撤销。</p>
                <div class="flex gap-3">
                    <button type="button" id="cancelDeleteBtn" class="btn btn-secondary flex-1 py-3 rounded-xl">取消</button>
                    <button type="button" id="confirmDeleteBtn" class="btn btn-danger flex-1 py-3 rounded-xl">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本文件 -->
    <script src="js/app.js?v=1.3"></script>
</body>
</html>